<template>
    <div id="contain" class="content-inner">
        <!-- 内容区头部 -->
        <header class="pageme-header">
            <!-- 面包屑 -->
            <Breadcrumb>
                <BreadcrumbItem to="/admin/home">主页</BreadcrumbItem>
                <BreadcrumbItem>通知管理</BreadcrumbItem>
            </Breadcrumb>
        </header>
        <div class="content-main">
            <!-- 内容区域显示部分 -->
            <div class="contain-main-show">
                <div class="add-type">
                    <Button type="primary" @click="modal1 = true"><Icon type="ios-add-circle-outline" /> 系统通知</Button>
                </div>
                <!-- 新增系统通知 -->
                <Modal
                    v-model="modal1"
                    title="新增系统通知"
                    @on-ok="ok"
                    @on-cancel="cancel">
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                        <FormItem label="标题" prop="nTitle">
                            <Input v-model="formValidate.nTitle" maxlength="30"
                            show-word-limit type="textarea"
                            placeholder="请输入标题" clearable/>
                        </FormItem>
                        <FormItem label="内容" prop="nContent">
                            <Input v-model="formValidate.nContent" type="textarea"
                            :autosize="{minRows: 5,maxRows: 12}" placeholder="请输入通知内容" clearable/>
                        </FormItem>
                        <FormItem label="接收者" prop="nReceiver">
                            <Input v-model="formValidate.nReceiver" placeholder="请输入接收者id" clearable/>
                        </FormItem>
                        <p>提示：接收者为 0 表示全员发送哦！</p>
                        <FormItem>
                            <Button type="primary" @click="publish('formValidate')">保存</Button>
                            <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                        </FormItem>
                    </Form>
                </Modal>
                <table class="tender-table table-border table-hover">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>标题</th>
                            <th>内容</th>
                            <th>发送者</th>
                            <th>接收者</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,i) in noticeList" :key="i">
                            <td>{{item.nId}}</td>
                            <td>{{item.nTitle}}</td>
                            <td>{{item.nContent}}</td>
                            <td>{{item.senderUser}}</td>
                            <td>{{item.receiverUser || '全部用户'}}</td>
                            <td class="user-action">
                                <a class="detail" href="javascript:void(0);" @click.prevent="findById(item.nId)">详情</a>
                                <a class="user-info" href="javascript:void(0);" @click.prevent="findDetail(item.nId)">编辑</a>
                                <span class="list-type">
                                    <a-popconfirm
                                        title="确认删除？"
                                        @confirm="deleteNoticeById(item.nId)"
                                        okText="Yes"
                                        cancelText="No">
                                        <a href="javascript:void(0)" class="shelf">删除</a>
                                    </a-popconfirm>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- 查看通知详情详情 -->
                <Modal
                    v-model="modal2"
                    title="通知详情">
                    <div class="userinfo-item">
                        <p>标题：{{noticeDetail.nTitle}}</p>
                        <p>内容：{{noticeDetail.nContent}}</p>
                        <p>发送者：{{noticeDetail.senderUser}}</p>
                        <p>接收者：{{noticeDetail.receiverUser || '全部用户'}}</p>
                        <p>创建时间：{{noticeDetail.nTime | dataFormat}}</p>
                        <p>发布时间：{{noticeDetail.nPubTime | dataFormat}}</p>
                    </div>
                </Modal>
                <!-- 编辑系统通知 -->
                <Modal
                    v-model="modal3"
                    title="编辑系统通知"
                    @on-ok="ok"
                    @on-cancel="cancel">
                    <Form ref="formValidateTwo" :model="formValidateTwo" :rules="ruleValidateTwo" :label-width="80">
                        <FormItem label="标题" prop="nTitle">
                            <Input v-model="formValidateTwo.nTitle" maxlength="30"
                            show-word-limit type="textarea"
                            placeholder="请输入标题" clearable/>
                        </FormItem>
                        <FormItem label="内容" prop="nContent">
                            <Input v-model="formValidateTwo.nContent" type="textarea"
                            :autosize="{minRows: 5,maxRows: 12}" placeholder="请输入通知内容" clearable/>
                        </FormItem>
                        <FormItem label="接收者" prop="nReceiver">
                            <Input v-model="formValidateTwo.nReceiver" placeholder="请输入接收者id" clearable/>
                        </FormItem>
                        <p>提示：接收者为 0 表示全员发送哦！</p>
                        <FormItem>
                            <Button type="primary" @click="update('formValidateTwo')">保存</Button>
                            <Button @click="handleReset('formValidateTwo')" style="margin-left: 8px">重置</Button>
                        </FormItem>
                    </Form>
                </Modal>
                <div class="page-all">
                    <Page :total="allPages.total" :page-size="pageSize"
                    :current="pageNum" @on-change="changePage"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'notice',
  data () {
    return {
      id: JSON.parse(localStorage.getItem('admin')).uId,
      modal1: false,
      modal2: false,
      modal3: false,
      noticeList: [],
      pageSize: 4, // 每页显示多少条
      allPages: [], // 存放分页的信息
      pageNum: 1, // 默认展示第一页数据
      noticeDetail: '', // 系统通知详情
      formValidate: {
        nTitle: '',
        nContent: '',
        nReceiver: ''
      },
      ruleValidate: {
        nTitle: [
          { required: true, message: '通知标题不能为空', trigger: 'blur' }
        ],
        nContent: [
          { required: true, message: '通知内容不能为空', trigger: 'blur' }
        ],
        nReceiver: [
          { required: true, message: '接收者不能为空', trigger: 'blur' }
        ]
      },
      formValidateTwo: {
        nTitle: '',
        nContent: '',
        nReceiver: ''
      },
      ruleValidateTwo: {
        nTitle: [
          { required: true, message: '通知标题不能为空', trigger: 'blur' }
        ],
        nContent: [
          { required: true, message: '通知内容不能为空', trigger: 'blur' }
        ],
        nReceiver: [
          { required: true, message: '接收者不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.findAll()
  },
  methods: {
    ok () {
      this.findAll()
    },
    cancel () {
      this.findAll()
    },
    // 查询所有系统通知列表
    findAll () {
      this.$axios({
        url: 'notice/findAll',
        method: 'get',
        params: {
          pageNo: this.pageNum,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.noticeList = res.data.pageInfo.list
          this.allPages = res.data.pageInfo
          this.noticeList.forEach(item => {
            // 根据Id查找发送者用户详情
            this.$axios({
              url: 'users/findById/' + item.nSender,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                this.$set(item, 'senderUser', res.data.object.uName)
              }
            }).catch(error => {
              console.log(error)
            })
            if (item.nReceiver !== 0) {
              // 根据Id查找发送者接收者详情
              this.$axios({
                url: 'users/findById/' + item.nReceiver,
                method: 'get'
              }).then(res => {
                if (res.data.code === 200) {
                  this.$set(item, 'receiverUser', res.data.object.uName)
                }
              }).catch(error => {
                console.log(error)
              })
            }
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变售卖中商品页码
    changePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNum = index
      this.findAll()
    },
    // 根据id查找系统通知详情
    findById (id) {
      this.noticeDetail = ''
      this.modal2 = true
      this.$axios({
        url: 'notice/findById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.noticeDetail = res.data.object
          // 根据Id查找发送者用户详情
          this.$axios({
            url: 'users/findById/' + this.noticeDetail.nSender,
            method: 'get'
          }).then(resu => {
            if (resu.data.code === 200) {
              this.$set(this.noticeDetail, 'senderUser', resu.data.object.uName)
            }
          }).catch(error => {
            console.log(error)
          })
          if (this.noticeDetail.nReceiver !== 0) {
            // 根据Id查找发送者接收者详情
            this.$axios({
              url: 'users/findById/' + this.noticeDetail.nReceiver,
              method: 'get'
            }).then(result => {
              if (res.data.code === 200) {
                this.$set(this.noticeDetail, 'receiverUser', result.data.object.uName)
              }
            }).catch(error => {
              console.log(error)
            })
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 编辑前查找系统通知详情
    findDetail (id) {
      this.formValidateTwo = {}
      this.modal3 = true
      this.$axios({
        url: 'notice/findById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.formValidateTwo = res.data.object
          this.formValidateTwo.nReceiver = (res.data.object.nReceiver).toString()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据id删除此系统通知
    deleteNoticeById (id) {
      this.$axios({
        url: 'notice/deleteNoticeById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findAll()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 修改系统通知
    update (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'notice/update',
            method: 'get',
            params: {
              nId: this.formValidateTwo.nId,
              nTitle: this.formValidateTwo.nTitle,
              nContent: this.formValidateTwo.nContent,
              nSender: this.id,
              nReceiver: this.formValidateTwo.nReceiver
            },
            headers: {
              Authorization: localStorage.getItem('adminToken')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$Message.success(res.data.msg)
              this.formValidate.nTitle = ''
              this.formValidate.nContent = ''
              this.formValidate.nReceiver = ''
              this.findAll()
            }
          }).catch(error => {
            console.log(error)
          })
        }
      })
    },
    // 新增通知
    publish (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'notice/publish',
            method: 'post',
            params: {
              nTitle: this.formValidate.nTitle,
              nContent: this.formValidate.nContent,
              nSender: this.id,
              nReceiver: this.formValidate.nReceiver
            },
            headers: {
              Authorization: localStorage.getItem('adminToken')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$Message.success(res.data.msg)
              this.formValidate.nTitle = ''
              this.formValidate.nContent = ''
              this.formValidate.nReceiver = ''
            } else {
              this.$Message.error('新增系统通知失败！')
              this.formValidate.nTitle = ''
              this.formValidate.nContent = ''
              this.formValidate.nReceiver = ''
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style scoped>

.page-all{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.add-type {
  margin: 10px 0 15px 10px;
}
/* 主要内容区域 */
.content-inner{
    width: 100%;
    height: calc(100% - 60px);
    min-height: 495px;
}
/* 内容区头部 */
header.pageme-header{
    width: 100%;
    height: 50px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    line-height: 50px;
    padding-left: 20px;
}
/* 内容区域 */
.content-main{
    width: 100%;
    height:auto;
    padding: 15px;
}
/* 内容区域显示部分 */
.contain-main-show{
    width: 100%;
    height: auto;
}

.tender-table{
    width: 100%;
    border-collapse: collapse;
}
.tender-table tr{
    border-bottom:1px solid #eee;
    text-align: left;
}
.tender-table thead tr{
    border-top:1px solid #eee;
    border-bottom:2px solid #eee;
}
.tender-table th,.tender-table td{
    padding:7px 10px;
    text-align: center;
}
.table-border{
    border:1px solid #eee;
}
.table-border th,.table-border td{
    border:1px solid #eee;
}
.table-hover thead tr{
    background-color: #f1f1f1;
}
.table-hover tbody tr:hover{
    background-color: #f1f1f1;
}

.user-action a {
  display: inline-block;
  color:#fff;
  font-size: 14px;
  padding: 3px 6px;
  background: #ed4014;
  border-radius: 5px;
}
.user-action .user-info {
  margin-right: 5px;
  background: #2d8cf0;
}
.user-action .detail {
  margin-right: 5px;
  background: #19be6b;
}
</style>
